<template>
  <!-- 空调能耗排名 -->
  <div class="lease-trend chart-box2">
    <div class="chart-title">
      <a-row style="width: 100%" justify="space-between">
        <a-col>空调能耗排名</a-col>
        <a-col>
          <small-tab
            :tabList="tabList"
            :activeKey="activeTab"
            @change="handleTabChange"
          />
        </a-col>
      </a-row>
    </div>
    <div class="chart-content">
      <ScrollTable :header="tableHeader" :list="data" :config="config" />
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, watch, computed } from "vue";
import common from "../../utils/common";
import store from "../../../../store";
import ScrollTable from "../common/ScrollTable.vue";
import SmallTab from "../common/SmallTab.vue";

export default defineComponent({
  name: "LeaseTrend",
  components: { ScrollTable, SmallTab },
  setup() {
    const state = reactive({
      data: [],
      config: {
        span: [4, 10, 10],
        style: [{ color: common.theme.textGreen }],
      },
      activeTab: "day",
      tabList: [
        { key: "day", title: "日" },
        { key: "month", title: "月" },
        { key: "year", title: "年" },
      ],
      day: [],
      Device_airConditionerConsumptionRanks: {},
    });

    const tableHeader = computed(() => {
      return [
        { key: "level", title: "排名等级" },
        { key: "room_name", title: "房间名称" },
        {
          key: "consumption",
          title: `${
            state.tabList.find((item) => item.key == state.activeTab).title
          }耗能量`,
        },
      ];
    });

    watch(
      () => store.getters.centerControl.Device_airConditionerConsumptionRank,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { Device_airConditionerConsumptionRank } =
        store.getters.centerControl;
      state.Device_airConditionerConsumptionRanks =
        Device_airConditionerConsumptionRank;
      if (Device_airConditionerConsumptionRank) {
        state.data = Device_airConditionerConsumptionRank[state.activeTab].map(
          (item) => {
            item.style = {
              room_name: {},
            };
            item.style.room_name.fontSize = "12px";
            return item;
          }
        );
      }
    };

    const handleTabChange = ({ key }) => {
      state.activeTab = key;
      state.data = state.Device_airConditionerConsumptionRanks[key].map(
        (item) => {
          item.style = {
            room_name: {},
          };
          item.style.room_name.fontSize = "12px";
          return item;
        }
      );
    };

    const init = () => {
      getData();
    };

    init();

    return {
      ...toRefs(state),
      handleTabChange,
      tableHeader,
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
</style>
